﻿
@{
    Layout = null;
}

<div>
    <div class="col-3 pr-0" style="display: none">
        <label id="ViewUseRecords-Parent-ModalID">@ViewData["ModalID"]</label>
        <label id="ViewUseRecords-OutInventoryId">@ViewData["OutInventoryId"]</label>
    </div>
</div>
<div class="table-responsive-sm modal-table-shadow p-0 bg-white rounded col-md-12 pre-scrollable" style="height: 60vh;">
    <table id="tabUseRecords" class="table table-striped table-bordered-modal table-sm table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>领用人</th>
                <th>领用数量</th>
                <th>领用单位</th>
                <th>领用时间</th>
            </tr>
        </thead>
        <tbody style="font-size: calc(0.6em + 0.1vw) !important"></tbody>
    </table>
</div>
<div class="text-right" style="padding-top: 5px;">
    <button id="ViewUseRecords-cancel" type="button" class="btn btn-info font-rfs-modal">关闭</button>
</div>

<script>

    $(document).ready(function () {
        LoadUseRecords();
    });

    function LoadUseRecords() {
        $('#tabUseRecords').bootstrapTable('destroy');
        var columns = [{ field: "id", visible: false }, { field: "useName" }, { field: "quantity" },
        { field: "unit" }, { field: "useDateTime", formatter: setDate }];

        $('#tabUseRecords').bootstrapTable({
            method: 'post',
            url: "/Inv/GetUseInventory",
            dataType: "json",  // 服务器端返回值类型
            contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
            queryParams: function (params) {
                var data = {
                    limit: params.limit, // 每页显示多少条记录
                    offset: params.offset, // 偏移量
                    OutInventoryId: $("#ViewUseRecords-OutInventoryId").html()
                };
                return data;
            },
            queryParamsType: "limit", // 服务器端分页，这个参数必需是“limit”
            dataField: "rows",

            uniqueId: "id",          // 设置主键
            sidePagination: "server", // 服务器端分页，这个参数必需设置
            pagination: true,  // 显示分页条,设为true，启用了分页功能
            pageNumber: 1,
            pageSize: 10,   // 默认页大小
            pageList: [5, 10, 15, 20],  // 控制每页数目
            locale: "zh-CN",
            columns: columns,          // 加载列定义, 注意！这个地方绑定的列名称开头大写字母会全部变成小写。
            onClickRow: function (row, $element, field) {
                $("#tabUseRecords").find("tbody").find("tr").each(function () {
                    $(this).removeClass('changeblueColor');
                });
                $element.addClass("changeblueColor");
            },
            silent: true,  //刷新事件必须设置
            formatLoadingMessage: function () {
                return "请稍等，正在加载中...";
            },
            formatNoMatches: function () {  //没有匹配的结果
                return '无符合条件的记录';
            },
            onLoadError: function (data) {
                $('#tabUseRecords').bootstrapTable('removeAll');
            },
            onLoadSuccess: function (data) {   // 数据加载成功后触发该事件
                SetBootstrapStyle();
            },
            formatShowingRows: function (pageFrom, pageTo, totalRows) {
                return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
            },
            formatRecordsPerPage: function (pageNumber) {
                return " 每页显示" + pageNumber + '条记录';
            }
        });
    }

    function setDate(value, row, index) {
        if (value != null)
            return value.split('T')[0] + " " + (value.split('T')[1]).split('.')[0];
    }

    $("#ViewUseRecords-cancel").click(function (event) {
        var modalID = $("#ViewUseRecords-Parent-ModalID").html();
        $("#" + modalID).modal('hide');
    });

</script>
